﻿<a>
    <img id="systemBtn" src="@Url.Content("~/images/gear.png")" alt="" title="Quản lý" /></a>
<div id="control-menu">
    <ul>
        @if (Session["user"] == null)
        { 
            <li><span id="signInBtn" style="float: right; line-height: 30px; margin-right: 5px">
                Đăng nhập</span></li>
            <li><span id="signUpBtn" style="float: right; line-height: 30px; margin-right: 5px">
                Đăng ký</span></li>
        }
        else
        { 
            <li>
                <a href="@Url.RouteUrl("MyProfile")"><img style="width:30px; height:30px; border:1px solid #ccc; margin-right:5px; background:#F7F7F7" src="@Url.Content("~/images/user-icon.png")" alt="" /><span
                    id="Span1" style="float: right; line-height: 30px; margin-right: 5px;">@Session["userName"],</span></a></li>
            <li><a href="@Url.RouteUrl("upload")"><span id="Span3" style="float: right; line-height: 30px;
                margin-right: 5px">Upload Ảnh </span></a></li>
            <li><a href="@Url.RouteUrl("logout")"><span id="Span2" style="float: right; line-height: 30px;
                margin-right: 5px">Thoát </span></a></li>
        }
    </ul>
</div>
<div class="clear">
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $('#systemBtn').click(function () {
            $('#control-menu').slideToggle('fast');
        });
    })
</script>
<script type="text/javascript">
    $(document).ready(function () {

        $('#signInBtn').click(function () {
            $.blockUI({ message: $('#login-box'), css: { width: '350px'} });
        });
        $('#signUpBtn').click(function () {
            $.blockUI({ message: $('#signUp-box'), css: { width: '450px'} });
        });

        $('.no').click(function () {
            $.unblockUI();
            return false;
        });

    }); 
</script>
<div id="login-box" class="block" style="display: none; cursor: default; color: #555998">
    <form action="" method="post">
    <div style="padding-top: 15px; width: 90%; margin: auto">
        <b>ĐĂNG NHẬP</b>
    </div>
    <div class="line">
    </div>
    <div>
        <table class="signup">
            <tr>
                <td style="width: 35%">
                    <b>Tên đăng nhập:</b>
                </td>
                <td>
                    <input class="input" type="text" id="loginName" name="accName" />
                </td>
            </tr>
            <tr>
                <td>
                    <b>Mật khẩu:</b>
                </td>
                <td>
                    <input class="input" type="password" id="loginPassword" name="password" />
                </td>
            </tr>
            <tr>
                <td>
                </td>
                <td>
                    <a href="#"><span style="font-size: 12px; font-weight: normal">Quên mật khẩu?</span></a>
                </td>
            </tr>
        </table>
    </div>
    <div class="line">
    </div>
    <div style="margin: auto; text-align: right; width: 90%; margin-bottom: 5px; display: table">
        <input class="button" id="signIn-send" type="button" value="Đăng nhập" />
        <input class="cancel-btn no" type="button" value="Hủy bỏ" />
    </div>
    </form>
</div>
<div id="signUp-box" class="block" style="display: none; cursor: default; color: #555998">
    <form action="" method="post" id="signupForm">
    <div style="padding-top: 15px; width: 90%; margin: auto">
        <b>ĐĂNG KÝ</b>
    </div>
    <div class="line">
    </div>
    <div>
        <table class="signup">
            <tr>
                <td style="width: 30%">
                    <b>Tên đăng nhập:</b>
                </td>
                <td>
                    <input class="input" type="text" id="signUpName" name="accName" />
                </td>
            </tr>
            <tr>
                <td>
                    <b>Mật khẩu:</b>
                </td>
                <td>
                    <input class="input" type="password" id="pass" name="password" />
                </td>
            </tr>
            <tr>
                <td>
                    <b>Nhập lại mật khẩu:</b>
                </td>
                <td>
                    <input class="input" type="password" id="rePass" name="rePassword" />
                </td>
            </tr>
            <tr>
                <td>
                    <b>Email:</b>
                </td>
                <td>
                    <input class="input" type="text" id="email" name="email" />
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="checkbox" value="" name="agree" />
                    <span style="font-size: 12px; font-weight: normal">Tôi đồng ý với những điều khoản của
                        trang web</span>
                </td>
            </tr>
        </table>
    </div>
    <div class="line">
    </div>
    <div style="margin: auto; text-align: right; width: 90%; margin-bottom: 5px; display: table">
        <input class="button" id="signUp-send" type="button" value="Đăng ký" />
        <input class="cancel-btn no" type="button" value="Hủy bỏ" />
    </div>
    </form>
</div>
<div id="message" style="display: none; cursor: default">
    <h1>@ViewData["message"]</h1>
    <input type="button" id="no" value="OK" />
</div>
<script type="text/javascript">
    $(document).ready(function () {
        var accName = $('#signUpName');
        var password = $('#pass');
        var rePassword = $('#rePass');
        var email = $('#email');
        var signupForm = $('#signupForm');

        $('#signUp-send').click(function () {
            $(".error").hide();
            if (validateForm()) {
                var link = '@Url.RouteUrl("signup")';
                var data = "accName=" + $('#signUpName').val() + "&password=" + $('#pass').val() + "&email=" + $('#email').val();
                $.ajax({
                    type: 'POST',
                    url: link,
                    data: data,
                    success: function (data) {
                        if (data != "") {
                            alert(data);
                            $.unblockUI();
                        }
                        else {
                            alert("Thất bại");
                        }

                    }
                });
            }
            else {
                return false;
            }
        });

        function validateForm() {
            if (validatePassword() & validateEmail() & validateAccName()) {
                return true;
            }
            else {
                return false;
            }
        }




        function validateAccName() {
            if (accName.val().length > 3) {
                return true;
            }
            else {
                accName.after('<span class="error">Tên phải từ 4 ký tự trở lên.</span>');
                return false;
            }
        }

        function validatePassword() {
            if (password.val().length > 3) {
                if (password.val() == rePassword.val()) {
                    return true;
                }
                else {
                    rePassword.after('<span class="error">Mật khẩu nhập lại chưa đúng.</span>');
                    return false;
                }
            }
            else {
                password.after('<span class="error">Mật khẩu ít nhất là 4 ký tự.</span>');
                return false;
            }
        }

        function validateEmail() {
            /*@*  *@*/
            var emailReg = /^([\w-\.]+@@([\w-]+\.)+[\w-]{2,4})?$/;
            var emailaddressVal = $("#email").val();
            if (emailaddressVal == '') {
                $("#email").after('<span class="error">Vui lòng nhập Email.</span>');
                return false;
            }
            else if (!emailReg.test(emailaddressVal)) {
                $("#email").after('<span class="error">Email không hợp lệ.</span>');
                return false;
            }
            else {
                return true;
            }

        }

    });



</script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#signIn-send').click(function () {

            var link = '@Url.RouteUrl("login")';
            var data = "accName=" + $('#loginName').val() + "&password=" + $('#loginPassword').val();
            $.ajax({
                type: 'POST',
                url: link,
                data: data,
                success: function (data) {
                    if (data != "") {
                        $.unblockUI();
                        window.location.reload();
                    }
                    else {
                        alert("Sai tên hoặc mật khẩu");
                    }

                }
            });
        });
    });
</script>
